<div class="page-header">
    <h1 class="page-title">我的电表</h1>
</div>

<div class="row">
    <div class="col-md-6 col-lg-3">
        <div class="dashboard-card">
            <h3 class="dashboard-card-title">电量余额</h3>
            <div class="dashboard-card-value text-success">
                <span id="powerBalance">0</span> 度
            </div>
        </div>
    </div>
    <div class="col-md-6 col-lg-3">
        <div class="dashboard-card">
            <h3 class="dashboard-card-title">已用电量</h3>
            <div class="dashboard-card-value text-info">
                <span id="powerUsed">0</span> 度
            </div>
        </div>
    </div>
    <div class="col-md-6 col-lg-3">
        <div class="dashboard-card">
            <h3 class="dashboard-card-title">费用余额</h3>
            <div class="dashboard-card-value text-primary">
                <span id="balanceAmount">0</span> 元
            </div>
        </div>
    </div>
    <div class="col-md-6 col-lg-3">
        <div class="dashboard-card">
            <h3 class="dashboard-card-title">本月用电</h3>
            <div class="dashboard-card-value text-warning">
                <span id="monthlyUsage">0</span> 度
            </div>
        </div>
    </div>
</div>

<div class="table-container mt-4">
    <h3>电表详细信息</h3>
    <table id="metersTable" class="table table-striped table-bordered">
        <thead>
            <tr>
                <th>电表号</th>
                <th>安装地址</th>
                <th>电表型号</th>
                <th>安装日期</th>
                <th>当前读数</th>
                <th>上次抄表日期</th>
                <th>状态</th>
            </tr>
        </thead>
        <tbody>
            <!-- 数据将通过JavaScript动态加载 -->
        </tbody>
    </table>
</div>

<div class="row mt-4">
    <div class="col-md-6">
        <div class="dashboard-card">
            <h3>近期用电趋势</h3>
            <canvas id="usageChart"></canvas>
        </div>
    </div>
    <div class="col-md-6">
        <div class="dashboard-card">
            <h3>用电费用趋势</h3>
            <canvas id="costChart"></canvas>
        </div>
    </div>
</div> 